<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Работа с прогнозами погоды</title>
</head>
<body>

<!-- Форма добавления прогноза погоды -->
<form id="addWeatherForecastForm">
    <h1 id="addWeatherForecastSuccess"></h1>
    <input type="number" id="regionId" placeholder="Идентификатор региона" required>
    <input type="datetime-local" id="dateTime" placeholder="Дата и время прогноза" required>
    <input type="number" id="temperature" placeholder="Температура, °C" required>
    <input type="text" id="weatherCondition" placeholder="Состояние погоды" required>
    <button type="submit">Добавить прогноз погоды</button>
</form>

<!-- Форма получения прогноза погоды по идентификатору -->
<form id="getWeatherForecastForm">
    <h1 id="getWeatherForecastSuccess"></h1>
    <input type="number" id="getForecastId" placeholder="Идентификатор прогноза" required>
    <button type="submit">Получить прогноз погоды</button>
</form>

<!-- Форма редактирования прогноза погоды -->
<form id="editWeatherForecastForm">
    <h1 id="editWeatherForecastSuccess"></h1>
    <input type="number" id="editForecastId" placeholder="Идентификатор прогноза" required>
    <input type="number" id="editTemperature" placeholder="Новая температура, °C" required>
    <input type="text" id="editWeatherCondition" placeholder="Новое состояние погоды" required>
    <input type="datetime-local" id="editDateTime" placeholder="Новая дата и время прогноза" required>
    <button type="submit">Редактировать прогноз погоды</button>
</form>

<!-- Форма удаления прогноза погоды -->
<form id="deleteWeatherForecastForm">
    <h1 id="deleteWeatherForecastSuccess"></h1>
    <input type="number" id="deleteForecastId" placeholder="Идентификатор прогноза" required>
    <button type="submit">Удалить прогноз погоды</button>
</form>

<!-- Информация о прогнозе погоды -->
<div id="weatherForecastInfo">
    <h2>Информация о прогнозе погоды:</h2>
    <!-- Здесь будет отображаться информация о прогнозе погоды -->
</div>

<script>
    document.getElementById('addWeatherForecastForm').addEventListener('submit', function (event) {
        event.preventDefault();
        const regionId = document.getElementById('regionId').value;
        const dateTime = document.getElementById('dateTime').value;
        const temperature = document.getElementById('temperature').value;
        const weatherCondition = document.getElementById('weatherCondition').value;

        const data = JSON.stringify({
            regionId: regionId,
            dateTime: dateTime,
            temperature: temperature,
            weatherCondition: weatherCondition
        });

        fetch('/region/weather/forecast', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: data
        })
            .then(response => {
                if (response.status === 200) {
                    document.getElementById("addWeatherForecastSuccess").innerText = "Прогноз погоды успешно добавлен!";
                    return response.json();
                } else {
                    document.getElementById("addWeatherForecastSuccess").innerText = "Ошибка при добавлении прогноза погоды!";
                }
            })
            .catch((error) => {
                console.error('Ошибка:', error);
                document.getElementById("addWeatherForecastSuccess").innerText = "Ошибка при добавлении прогноза погоды!";
            });
    });

    document.getElementById('getWeatherForecastForm').addEventListener('submit', function (event) {
        event.preventDefault();
        const forecastId = document.getElementById('getForecastId').value;
        fetch(`/region/weather/forecast/${forecastId}`)
            .then(response => {
                if (response.status === 200) {
                    return response.json();
                } else {
                    throw new Error('Ошибка при получении прогноза погоды!');
                }
            })
            .then(data => {
                document.getElementById("weatherForecastInfo").innerHTML = `
                    <p>Идентификатор прогноза: ${data.id}</p>
                    <p>Идентификатор региона: ${data.regionId}</p>
                    <p>Температура: ${data.temperature} °C</p>
                    <p>Состояние погоды: ${data.weatherCondition}</p>
                    <p>Дата и время прогноза: ${data.dateTime}</p>
                `;
                document.getElementById("getWeatherForecastSuccess").innerText = "Прогноз погоды успешно получен!";
            })
            .catch((error) => {
                console.error('Ошибка:', error);
                document.getElementById("getWeatherForecastSuccess").innerText = "Ошибка при получении прогноза погоды!";
            });
    });

    document.getElementById('editWeatherForecastForm').addEventListener('submit', function (event) {
        event.preventDefault();
        const forecastId = document.getElementById('editForecastId').value;
        const temperature = document.getElementById('editTemperature').value;
        const weatherCondition = document.getElementById('editWeatherCondition').value;
        const dateTime = document.getElementById('editDateTime').value;

        const data = JSON.stringify({
            temperature: temperature,
            weatherCondition: weatherCondition,
            dateTime: dateTime
        });

        fetch(`/region/weather/forecast/${forecastId}`, {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: data
        })
            .then(response => {
                if (response.status === 200) {
                    document.getElementById("editWeatherForecastSuccess").innerText = "Прогноз погоды успешно отредактирован!";
                    return response.json();
                } else {
                    document.getElementById("editWeatherForecastSuccess").innerText = "Ошибка при редактировании прогноза погоды!";
                }
            })
            .catch((error) => {
                console.error('Ошибка:', error);
                document.getElementById("editWeatherForecastSuccess").innerText = "Ошибка при редактировании прогноза погоды!";
            });
    });

    document.getElementById('deleteWeatherForecastForm').addEventListener('submit', function (event) {
        event.preventDefault();
        const forecastId = document.getElementById('deleteForecastId').value;
        fetch(`/region/weather/forecast/${forecastId}`, {
            method: 'DELETE',
            headers: {'Content-Type': 'application/json'}
        })
            .then(response => {
                if (response.status === 200) {
                    document.getElementById("deleteWeatherForecastSuccess").innerText = "Прогноз погоды успешно удален!";
                } else {
                    document.getElementById("deleteWeatherForecastSuccess").innerText = "Ошибка при удалении прогноза погоды!";
                }
            })
            .catch((error) => {
                console.error('Ошибка:', error);
                document.getElementById("deleteWeatherForecastSuccess").innerText = "Ошибка при удалении прогноза погоды!";
            });
    });
</script>

</body>
</html>